<template>
  <div class="header">
    <div class="header-title" @click="showCoinModal">{{ money }} <i class="icon-arrow-up" /></div>
    <div class="header-action" @click="showPicker"><i class="icon-dot" /></div>
    <coin-modal ref="coinModal" />
    <picker-view ref="picker" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import coinModal from '@/components/partials/otc/common/CoinModal'
import PickerView from '@/components/partials/otc/index/PickerView.vue'
export default {
  components: { coinModal, PickerView },
  computed: {
    ...mapState({
      money: ({ otc }) => otc.money
    })
  },
  methods: {
    showCoinModal () {
      this.$refs.coinModal.show()
    },
    showPicker () {
      this.$refs.picker.show()
    }
  }
}
</script>
<style scoped>
.header {
  position: relative;
  height: 50px;
}
.header-title {
  font-size: 18px;
  line-height: 50px;
  text-align: center;
}
.header-action {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  color: #1b8afe;
  font-size: 30px;
}
.icon-arrow-up {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('~@/assets/images/icons/arrow-up.svg');
  background-repeat: no-repeat;
  background-size: 130% 130%;
  background-position: -4px 1px;
}
.icon-dot {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url('~@/assets/images/icons/dot.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center 4px;
}
</style>
